import React, { useState, useCallback } from "react";
import { Row } from "@react/grid"; 
import { envoke } from "@store";
import "@static/components/icons/plus.less";

export default props => {
    const { pid, defaultVal = '' } = props;
    const [ value, setValue ] = useState(defaultVal);

    const addTodoitem = useCallback(() => {
        envoke(pid, "addList", {name: value});
    }, [value]);

    const onInput = useCallback((e) => {
        console.log('onInput => ', e.target.value);
        setValue(e.target.value);
    }, [value]);

    return <Row style={{color: "#ffffff", padding: "0"}}>
                <div className="box-container">
                    <div className="form">
                        <input type="text" className="text" value={value} onInput={onInput}  placeholder="添加条目" />
                        <div className="button" onClick={addTodoitem}>
                            <a href="#" onClick={e => e.preventDefault()} className="gg-math-plus" style={{display: "inline-block", verticalAlign: "text-bottom"}}></a>
                        </div>
                    </div>
                </div>
        </Row>
}